<!DOCTYPE HTML>
<html class='dark'>
<head>
	<meta charset="utf-8">
	<title>报错处理</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="../static/css/element.css"> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<!-- <script src="//unpkg.com/vue@3"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/vue@3"></script> -->
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- <script src="../static/js/vue.global.prod2.js"></script> --> <!-- 该文件是由vue.global.prod.js格式化后稍作修改而来的（vue.global.prod0.js是格式化未修改的）【实际使用时，文件名改为vobj.js】 -->
	<script src="../static/js/vobj.js"></script> <!-- 这里把vobj2.js一步步还原到没有二开的状态，看在哪一步能正常 -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/element-plus"></script> -->
	<!-- <script src="../static/js/element-plue.js"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

<style>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
html.dark {
  /* 自定义深色背景颜色 */
  /* --el-bg-color: #626aef; */
  /* --el-color-primary: red; */
}
</style>
</head>
<body>
<div id="app" class="">
	
	<el-button type="primary" @click="hello('8866')">点击4</el-button>
	<!-- <button @click="hello('8866')">点击4</button> -->
	<p>{{ message }}</p>
	<p v-html="getNum(7)"></p>
	
	
	<div class="box-cell">
		<el-divider content-position="left">上传表格</el-divider><!-- =============================================================== -->
		<el-upload ref="upload" :disabled="!allow_submit" class="upload-excel" drag action="{:url('agent/upexcel')}"
		 :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-preview="handlePreview" :on-change="handleChange" :file-list="fileList">
			<div class="h50"></div>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text" v-if="allow_submit">拖拽文件到这里或 <em>点击上传</em></div>
			<div class="el-upload__text" v-else>没有“上传和提交”权限</div>
			<div class="h50"></div>
			<template #tip><div class="el-upload__tip">请上传小于8M的xlsx表格</div></template>
		</el-upload>
		<div class="box-submit">
			<el-button v-if="allow_submit" type="primary" @click="submitUp" class="center-botton">提交</el-button>
			<el-button v-else type="info" class="center-botton" disabled>提交</el-button>
		</div>
	</div>
	
	
</div>

</body>
<script>
const Main0 = {
	// data() {
	// 	return {
	// 		Icons: ElementPlusIconsVue,
	// 		message: 'Hello Vue!!',
	// 		size: 'default',
	// 		allow_submit: true,
	// 	}
	// },
	data: {
		Icons: ElementPlusIconsVue,
		message: 'Hello Vue!!',
		size: 'default',
		allow_submit: true,
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			// console.log("Start...");
			
		})
	},
	computed: {
		hasStr(){
			return function(str){
				return this.message.includes(str);
			}
		},
		getNum(){
			return function(num){
				return num * 10;
			}
		},
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		},
		
		handlePreview(file) {
			//加了 list-type="picture" 之后这里就不生效了
			console.log(file)
		},
		beforeAvatarUpload(file) {
			// console.log(file);
			const isXlsx = file.name.substr(-5) == '.xlsx';
			const isLt8M = file.size / 1024 / 1024 < 8;
			if (!isXlsx) {
				this.$message.error('上传的表格必须是 .xlsx 格式的！')
			}
			if (!isLt8M) {
				this.$message.error('上传的表格不能超过8M！')
			}
			return isXlsx && isLt8M
		},
		handleAvatarSuccess(res, file, fileList) {
			console.log(res, file, fileList);
			if(JSON.stringify(res.data) == "[]"){
				this.$message.error('表格上传失败！')
			}else{
				this.resDataPath = res.data.path;
				this.$message.success('表格上传成功，可以点提交了！')
			}
			// console.log(this.resDataPath);
		},
		handleChange(file, fileList) {
			//仅仅保留1个
			this.fileList = fileList.slice(-1)
		},
		submitUp(){
			if(this.resDataPath){
				window.location.href='/chain/set/calcto.html?excelpath=' + this.resDataPath
			}else{
				this.$message.warning("请先上传表格！");
			}
		}
		
	},
	//监听属性，监听器
	watch:{
		message:function(value){
			console.log("message发生了改变：" + value);
		}
	},
}

//Main的新写法
let Main = {}
Main.data = {
	Icons: ElementPlusIconsVue,
	message: 'Hello Vue!!999',
	size: 'default',
	allow_submit: true,
}

//实例挂载完成后被调用
Main.mounted = function(){
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		console.log("Start...99");
		
	})
}

Main.computed = {
	getNum(){
		return function(num){
			return num * 10;
		}
	},
}

Main.methods = {
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	handlePreview(file) {
		//加了 list-type="picture" 之后这里就不生效了
		console.log(file)
	},
	beforeAvatarUpload(file) {
		// console.log(file);
		const isXlsx = file.name.substr(-5) == '.xlsx';
		const isLt8M = file.size / 1024 / 1024 < 8;
		if (!isXlsx) {
			this.$message.error('上传的表格必须是 .xlsx 格式的！')
		}
		if (!isLt8M) {
			this.$message.error('上传的表格不能超过8M！')
		}
		return isXlsx && isLt8M
	},
	handleAvatarSuccess(res, file, fileList) {
		console.log(res, file, fileList);
		if(JSON.stringify(res.data) == "[]"){
			this.$message.error('表格上传失败！')
		}else{
			this.resDataPath = res.data.path;
			this.$message.success('表格上传成功，可以点提交了！')
		}
		// console.log(this.resDataPath);
	},
	handleChange(file, fileList) {
		//仅仅保留1个
		this.fileList = fileList.slice(-1)
	},
	submitUp(){
		if(this.resDataPath){
			window.location.href='/chain/set/calcto.html?excelpath=' + this.resDataPath
		}else{
			this.$message.warning("请先上传表格！");
		}
	}
	
}

Main.watch = {
	message:function(value){
		console.log("message发生了改变：" + value);
	},
}

const app = createApp(Main); //如果在vue.global.prod2.js文件的末尾写var Vue = VObj; 则这里创建app可以直接用VObj调用构建方法
// const app = createApp2(Main0);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
